import React from 'react';
import SVG from 'svg.js';
import Draggable from 'react-draggable';
import { api } from 'js/api/base';
import { userData } from 'js/core/userData';
import './mapBox.scss'
class MapBox extends React.Component {
    constructor() {
        super()
        this.state = {
            mapLattices: {},
            selectLatticeId: null,
        }
    }
    componentDidMount() {
        //  this.draw = SVG('rectangle');
        let user = userData.get();
        let player = user.player;
        let mapId = player.basicInfo.mapId;
        api('getAdventrueMap', { mapId: mapId }, (err, data) => {
            let mapLattices = data.list;
            // this.setState({ mapLattices: mapLattices }, () => {
            //     let selectLatticeId = userData.get().player.basicInfo.latticeId;
            //     this.props.onChange(mapLattices[selectLatticeId]);
            //     this.setState({ selectLatticeId: selectLatticeId })
            //     // this.setLine(mapLattices);
            // })
        })
    }
    setLine = (mapLattices) => {
        let rectangleTop = this.refs.rectangle.getBoundingClientRect().top;
        let rectangleLeft = this.refs.rectangle.getBoundingClientRect().left;
        for (let i in mapLattices) {
            let lattice = mapLattices[i];
            let centerX = parseInt(this.refs[i].getBoundingClientRect().left - rectangleLeft + this.refs[i].offsetWidth / 2);
            let centerY = parseInt(this.refs[i].getBoundingClientRect().top - rectangleTop + this.refs[i].offsetHeight / 2);
            if (lattice.to) {
                let toLattices = lattice.to;
                for (let j = 0; j < toLattices.length; j++) {
                    let index = toLattices[j];
                    let toX = parseInt(this.refs[index].getBoundingClientRect().left - rectangleLeft + this.refs[index].offsetWidth / 2);
                    let toY = parseInt(this.refs[index].getBoundingClientRect().top - rectangleTop + this.refs[index].offsetHeight / 2);
                    this.draw.line(centerX, centerY, centerX, centerY).stroke({ color: '#ccc', width: 3 }).animate(3000).to(toX, toY);
                }
            }
        }
    }
    handleDrag = (item, ui) => {
        item.x = parseInt(ui.x * 100 / window.fontSize);
        item.y = parseInt(ui.y * 100 / window.fontSize);
        this.setState({ mapLattices: this.state.mapLattices })
    }
    onClick = (item) => {
        this.props.onChange(item)
    }
    render() {
        const { mapLattices, selectLatticeId } = this.state;
        let latticesNode = [];
        for (let i in mapLattices) {
            let item = mapLattices[i];
            let x = item.x / 100 * window.fontSize;
            let y = item.y / 100 * window.fontSize;
            let select = '';
            if (parseInt(i) === parseInt(selectLatticeId)) {
                select = ' active';
            }
            let node = <Draggable key={i} onDrag={(e, ui) => { this.handleDrag(item, ui) }} position={{ x: x, y: y }}>
                <button className={"latticeButton" + select} ref={i} onClick={() => { this.onClick(item) }}>{item.name}</button>
            </Draggable>
            latticesNode.push(node);
        }

        return (
            <div className="mapBox">
                <div className="mapList flex-g-1">
                    <div className="rectangle" id="rectangle" ref="rectangle">
                        {latticesNode}
                    </div>
                </div>
                <div className="pos N">N</div>
                <div className="pos E">E</div>
                <div className="pos W">W</div>
                <div className="pos S">S</div>
            </div>
        )
    }
}

export default MapBox;